<!--设置模块唯一ID-->
<div id="cyy_datingshangpuguanli_pingmiantu">
<!--标题、面包屑-->
<section class="content-header">
    <h1>
        产业园平面图
        <small>插花馆</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li>插花馆</li>
        <li class="active">平面图</li>
    </ol>
</section>
<!--列表-->
<section class="content pingmiantu">
    <ul class="nav nav-pills nav-stacked col-sm-2">
        <li class="active"><a href="#" data-toggle="tab" aria-expanded="false">1号厅</a></li>
        <li class=""><a href="#" data-toggle="tab" aria-expanded="false">2号厅</a></li>
        <li class=""><a href="#" data-toggle="tab" aria-expanded="false">3号厅</a></li>
        <li class=""><a href="#" data-toggle="tab" aria-expanded="false">6号厅（1）</a></li>
        <li class=""><a href="#" data-toggle="tab" aria-expanded="false">6号厅（2）</a></li>
        <li class=""><a href="#" data-toggle="tab" aria-expanded="false">6号厅（3）</a></li>
    </ul>
    <div class="tab-content col-sm-10">
        <div class="box">
            <div class="box-header">
                <div class="btn-group pull-left" data-type="actionBar">
                </div>
                <div class=" pull-right" data-type="columnControl">
                </div>
                <div class=" pull-right " data-type="searchControl">
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="box-body">
                <table class="table table-bordered table-striped table-hover" style="width: 2500px"></table>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
</section>
</div>

<script type="text/javascript">
    USEN(function(){
        //模块ID(全系统唯一)
        var id = "#cyy_datingshangpuguanli_pingmiantu";

        //定义页面变量
        var $el = $(id);
        var $actionBar = $el.find("[data-type=actionBar]");
        var tableId = id + " table.table";
        var $table = $(tableId);
        var myTable;

        //定义增\删\改 方法
        var editor = {
            add: function () {
                USEN.load(USEN.router[addId]);
            },
            remove: function (data) {
                USEN.modal({
                    title: "提示",
                    content: "是否删除这条数据?",
                    submitTxt: "删除",
                    submitCb: function ($el) {
                        $.ajax({
                            url: "./simdata/common_remove_action.json",
                            data: data,
                            success: function (result) {
                                USEN.notifyAlert({
                                    title: "提示:",
                                    content: '删除成功.'
                                });
                                $el.modal("hide");
                                if (myTable) myTable.ajax.reload();
                            }
                        })
                    }
                })
            },
            modify: function () {
                USEN.load(USEN.router[modifyId]);
            }
        };

        // 绑定列表编辑按钮事件
        $actionBar.find("[data-action]").on("click", function () {
            var action = $(this).data("action");
            var $selected = $table.find('tr.selected');
            switch (action) {
                case "addByForm" :
                    editor.add();
                    break;
                case "modify" :
                    if ($selected.length > 0) {
                        editor.modify(myTable.row($selected).data());
                    } else {
                        //提示"请选中要修改的行"
                        USEN.modal({
                            title: "提示",
                            content: "请选中要修改的行.",
                            cancelBtn: true,
                            cancelTxt: "关闭"
                        })
                    }
                    break;
                case "delete" :
                    if ($selected.length > 0) {
                        editor.remove(myTable.row($selected).data());
                    } else {
                        //提示"请选中要修改的行"
                        USEN.modal({
                            title: "提示",
                            content: "请选中要修改的行.",
                            cancelBtn: true,
                            cancelTxt: "关闭"
                        })
                    }
                    break;
            }
        });
        //初始化datatable数据列表
        myTable = new USEN.Datatable({
            //设置ID
            "id": tableId,
            //设置列控制模块容器
            "columnControl": id + " [data-type=columnControl]",
            //设置搜索模块容器
            "searchControl": id + " [data-type=searchControl]",
            //每行"操作"自定义action按钮回调
            onItemAction: function ($tr, action) {
                switch (action) {
                    case "chengzuren" :
                        USEN.load(USEN.router['cyy_datingshangpuguanli_chengzuren_modify']);
                        break;
                    case "xuyue" :
                        USEN.load(USEN.router['cyy_datingshangpuguanli_xuyue_modify']);
                        break;
                    case "zulin" :
                        USEN.load(USEN.router['cyy_datingshangpuguanli_zulin_add']);
                        break;
                }
            },
            //配置服务
            "ajax": "./simdata/common_table_ation.json",
            //列设置
            "columns": [
                { "title": "序号", "data": "p0"},
                { "title": "摊位号", "data": "p1"},
                { "title": "姓名", "data": "p2"},
                { "title": "电话", "data": "p3"},
                { "title": "面积", "data": "p4" },
                { "title": "单价/每平米", "data": "p5" },
                { "title": "半年租金", "data": "p7" },
                { "title": "全年租金", "data": "p8" },
                { "title": "合同有效期", "data": "p9" },
                { "title": "下半年缴费时间", "data": "p16" },
                { "title": "下半年续签合同、交费日期", "data": "p17" },
                { "title": "操作", "data": null, bSortable: false, width: '200px', render: function (data, type, full, meta) {
                    return  '<button data-item-action="chengzuren" class="btn btn-primary">变更承租人</button>&nbsp;&nbsp;'+
                            '<button data-item-action="xuyue" class="btn btn-primary">续约</button>&nbsp;&nbsp;'+
                            '<button data-item-action="zulin" class="btn btn-primary">租赁</button>'
                }}
            ]
        });

        $(id + ' .nav').on('show.bs.tab',function(e){
            myTable.ajax.url('./simdata/common_table_ation.json').load();
        });

    })
</script>